<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        
        <title>Jquery.ui.map - advanced example</title>
        
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />  
		
        <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.2.0/build/cssreset/reset-min.css" />
        <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.2.0/build/cssbase/base-min.css" />
		<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.2.0/build/cssfonts/fonts-min.css" />
        <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/ui-lightness/jquery-ui.css" />	 
        <link rel="stylesheet" type="text/css" href="css/main.css" />
        
        <script src="http://www.google.com/jsapi?key=ABQIAAAAahcO7noe62FuOIQacCQQ7RTHkUDJMJAZieEeKAqNDtpKxMhoFxQsdtJdv3FJ1dT3WugUNJb7xD-jsQ" type="text/javascript"></script>        
        <script type="text/javascript">
		//<![CDATA[
			google.load("maps", "3", {'other_params':'sensor=true'});
			google.load("jquery", "1.4");
			google.load("jqueryui", "1.8");
		//]]>
		</script>
        <script type="text/javascript" src="../ui/jquery.ui.map.js"></script>
        <script type="text/javascript">
		//<![CDATA[
			$(document).ready(function() {
				
				$('#map_canvas').gmap({ 'center': getLatLng(), 'streetViewControl': false, 'callback': init });
				
				function init() {
					$('#map_canvas').gmap('watchPosition', function(position) {
						$('#map_canvas').gmap('option', 'map').setCenter( new google.maps.LatLng(position.coords.latitude, position.coords.longitude) );							   
				    });
					$('#map_canvas').gmap('loadHTML', 'microformat', 'vevent', 
						function(markeropts, node, index) {
							var clone = $(node).clone().addClass('ui-dialog-vevent').append('<div id="streetview'+index+'" class="streetview"></div>');
							var summary = $(node).find('.summary');
							markeropts.title = summary.html();
							markeropts.icon = new google.maps.MarkerImage('http://google-maps-icons.googlecode.com/files/music-rock.png'), new google.maps.Size(32, 37), new google.maps.Point(0,0), new google.maps.Point(0, 37);							
							$('#map_canvas').gmap('addMarker', markeropts, function(map, marker) {
								var onclickevent = function() {
									map.panTo(marker.position);
									$(clone).dialog({ 'modal': true, 'width': 530, 'title': summary.html(), 'resizable': false, 'draggable': false });
									$('#map_canvas').gmap('loadStreetViewPanorama', 'streetview'+index, { 'position': marker.position });
								}
								google.maps.event.addListener(marker, 'click', onclickevent);
								summary.click( function() {
									google.maps.event.trigger(marker, 'click');
									onclickevent();
									return false;
								}); 
							});
						}
					);
				}
				
				function getLatLng() {
					if ( google.loader.ClientLocation != null ) {
						return new google.maps.LatLng(google.loader.ClientLocation.latitude, google.loader.ClientLocation.longitude);	
					}
					return new google.maps.LatLng(59.3426606750, 18.0736160278);
				}
				
            });
		//]]>
		</script>
        
	</head>
    <body id="advanced">
        <h1><a href="http://code.google.com/p/jquery-ui-map/">jQuery.ui.map plugin</a> demo</h1>
        <div id="events">
            <h3>December</h3>
			<ul class="v-list">
            	<li>
                	<div class="vevent">
                    	<span class="datetime">
                            <abbr title="20101214" class="dtstart">Tuesday December 14, 2010</abbr>
                        </span>
                        <span class="summary">Robyn - Stockholm</span> at
                        <span class="location vcard">  
                            <span class="fn org"><a href="/venue/8473/STHLM/Stockholm/Berns-Salonger/">Berns Salonger</a></span>
                            <span class="address adr">
                                <span class="street-address">Berzelii Park</span>
                                <span class="locality">Stockholm</span>, <span class="region">Stockholm</span>
                                <span class="geo hidden">
                                    <abbr title="59.3426606750" class="latitude">59.3426606750</abbr> 
                                    <abbr title="18.0736160278" class="longitude">18.0736160278</abbr>
                                </span>
                            </span>
                        </span> <!-- /.venue -->
                        <div class="website">Website: <a class="url" href="http://concertful.com/concert/robyn/" rel="nofollow">http://concertful.com/concert/robyn/</a></div>
                    </div>
				</li>
            </ul>
            <h3>August</h3>
			<ul class="v-list">
            	<li>
                	<div class="vevent">
                    	<span class="dtstart">
                        	<span class="value">Saturday August 19, 2010</span> at <span class="value">19:00</span>
                         </span>
                         <span class="summary">Microformats + Activity Streams Meetup San Francisco</span> at 
                         <span class="location vcard">
                         	<span class="fn org">Westfield Food Court</span>, 
                            <span class="adr">
                            	<span class="locality">San Francisco</span>, 
                                <span class="region">California</span>.
                            </span>
                            <span class="geo hidden">
                                <abbr class="latitude" title="37.7749295">37.7749295</abbr> 
                                <abbr class="longitude" title="-122.4194155">-122.4194155</abbr>
                            </span>
                        </span> 
                        <div class="website">Website: 
                        	<a class="url" href="http://microformats.org/wiki/events/2010-08-19-dinner-sf" rel="nofollow">http://microformats.org/wiki/events/2010-08-19-dinner-sf</a>
                        </div>
                    </div>
				</li>
            </ul>
        </div>
        <div id="map_canvas"></div>
        <div id="ft" class="hidden">
        	Author: 
            <div id="hcard-Johan-Säll-Larsson" class="vcard">
                <span class="fn n">
                    <span class="given-name">Johan</span> 
                    <span class="family-name">Säll Larsson</span>
                </span>
                <span class="adr">
                    <span class="locality">Göteborg</span>,
                    <span class="country-name">Sweden</span>
            	</span>
            </div>
        </div>
        
    </body>
</html>



      